<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table td,
      th {
        width: 100px;
        height: 60px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <button id="addBtn">添加一条新的访客信息</button>
    <button id="deleteSelectBtn">删除选中</button>
    <button id="sortBtn">年龄从小到大</button>
    <button id="allSelecttBtn">全选</button>
    <button id="allNotSelecttBtn">全部取消选中</button>
    <button id="reverseSelectBtn">反选</button>
    <table border="1" cellspacing="0">
      <tbody>
        <tr>
          <th>序列号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
          <th>选择</th>
        </tr>
      </tbody>
    </table>
    <script>
      var info = [
        {
          name: "胡杭",
          age: 16,
        },
        {
          name: "胜明",
          age: 22,
        },
        {
          name: "军毅",
          age: 21,
        },
        {
          name: "晓华",
          age: 13,
        },
        {
          name: "盛聪",
          age: 23,
        },
        {
          name: "侦剑",
          age: 32,
        },
        {
          name: "红翔",
          age: 25,
        },
        {
          name: "超维",
          age: 18,
        },
        {
          name: "士琪",
          age: 22,
        },
        {
          name: "艳华",
          age: 20,
        },
      ];

      let addBtn = document.getElementById("addBtn");
      let tbody = document.querySelector("tbody");
      let deleteSelectBtn = document.getElementById("deleteSelectBtn");
      let sortBtn = document.getElementById("sortBtn");
      let allSelectBtn = document.getElementById("allSelecttBtn");
      let allNotSelectBtn = document.getElementById("allNotSelecttBtn");
      let reverseSelectBtn = document.getElementById("reverseSelectBtn");
      let index = 0; //模拟下标

      //添加
      addBtn.onclick = function () {
        // 当前index值要小于数组长度,否则会报错，获取不到数组的值
        if (index < info.length) {
          let newTr = document.createElement("tr");

          newTr.innerHTML = `
        <td>${index + 1}</td>
        <td>${info[index].name}</td>
        <td>${info[index].age}</td>
        <td><button id="deleteBtn">删除</button></td>
        <td><form><input type="checkbox"></input></form></td>
        `;

          tbody.appendChild(newTr);
          //添加后自增
          index++;

          //删除单个信息
          let deleteBtn = tbody.querySelectorAll("#deleteBtn");
          console.log(deleteBtn);
          //每个删除按钮绑定点击事件
          deleteBtn.forEach(function (element) {
            element.onclick = function () {
              element.parentElement.parentElement.remove();
            };
          });
        }
      };

      //删除选中
      deleteSelectBtn.onclick = function () {
        checkboxs.forEach(function (item) {
          if (item.checked) {
            item.parentElement.parentElement.parentElement.remove();
          }
        });
      };

      //按年龄从小到大排序
      sortBtn.onclick = function () {
        //创建新数组存放每一个tr
        let newDataArr = [];
        //获取除了表头外的所有tr
        let trData = document.querySelectorAll("tr:not(:first-child)");

        //遍历每一个tr并放进新数组
        trData.forEach(function (item) {
          newDataArr.push(item);
        });

        // 新数组里的tr按年龄从小到大排序
        newDataArr.sort(function (a, b) {
          return a.children[2].innerText - b.children[2].innerText;
        });

        //新数组重新排序后的tr替换tbody里的tr
        newDataArr.forEach(function (item) {
          tbody.appendChild(item);
        });
        // console.log(tr);
        // console.log(tr[index2].children[2].textContent);
      };

      //全选
      allSelectBtn.onclick = function () {
        let checkboxs = tbody.querySelectorAll("input[type = 'checkbox']");
        checkboxs.forEach(function (item) {
          item.checked = true;
        });
      };

      //全部取消选中
      allNotSelectBtn.onclick = function () {
        let checkboxs = tbody.querySelectorAll("input[type = 'checkbox']");
        checkboxs.forEach(function (item) {
          item.checked = false;
        });
      };

      //反选
      reverseSelectBtn.onclick = function () {
        let checkboxs = tbody.querySelectorAll("input[type = 'checkbox']");
        checkboxs.forEach(function (item) {
          item.checked = !item.checked;
        });
      };
    </script>
  </body>
</html>
